<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素清除法</title>
    <style type="text/css">
        .top_bar{
            /* BFC区域规则 */
            /* 计算BFC(会计盒子)的高度时 浮动元素也参与计算 */
            /* 形成BFC的条件：除了overflow:visitable的属性值 */
            /* Block Formtting Context */
            border: 1px solid red;
            overflow: hidden;
        }
        .child1{
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            float: left;
        }
        .child2{
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            float:right;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: purple;
        }
        /* .clear{
            clear: both;
        } */
        .a::after{
            /* 行内元素 */
            content: "";
            display: block;
            clear: both;
        }
        
    </style>
</head>
<body>
    <!-- 1.给父元素设置固定高度
            缺点:使用不够灵活 后期不易维护
            应用:网页中盒子固定高度的区域 比如固定的导航栏
         2.内墙法(了解)
            规则:在最后一个浮动元素的后面加一个空的块级 并且设置该属性 clear: both;
            缺点:结构冗余
        3.伪元素(选择器)清除
        4.overflow:hidden;
    -->
    <div class="top_bar clearfix">
        <div class="child1">大儿子</div>
        <div class="child2">二儿子</div>
        <div class="clear"></div>
    </div>
    <div class="header">

    </div>
    <!-- <p>
        <a href="#">百度一下</a>
    </p> -->
</html>